<template>
    <section class="f-mainPage">
        <!--selectFunc 选择完成的回调      searchList 下拉列表的数据-->
        <search @selectFunc="selectFunc" :searchList="searchList" :selectValue="selectValue"></search>
    </section>
</template>

<script>
// type="text/ecmascript-6"
  // import Search from '@/com/search';
    import Search from '@/components/Search/Search';
  //  import Search from '../vuePlugin/search';
  export default {
    data() {
      return {
        searchList: ['草船借箭', '大富翁', '测试数据'],
          // searchList: ['草船借箭', '大富翁', '测试数据'],
        // 直接通过props传递对象 修改，挺便捷的,但是不规范
        selectValue: {
          data: '1'
        },
        // 通过emit修改，规范写法
        selectValue2: ''
      }
    },
    mounted() {
      console.log("Search father");
      
    },
    methods: {
      pageGo(path) {
        this.$router.push('/' + path)
      },
      selectFunc(value) {
        this.selectValue2 = value
        // console.log(this.selectValue)
        // console.log(this.selectValue2)
      }
    },
    components: {
      Search
    }
  }
</script>


<style   scoped>
.f-mainPage {
  width: 100%;
}
.f-mainPage .g-banner {
  width: 100%;
  /* background-image: url(../../../static/main_bg.png); */
  background-image: url(../../assets/background.jpg);
  /* "G:\project\vue\hunan2\src\assets\background.jpg" */
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
  overflow: hidden;
  color: white;
  text-align: center;
}
.f-mainPage .g-banner p:nth-child(1) {
  margin: 10px auto 0px auto;
  font-size: 1.3rem;
}
.f-mainPage .g-banner .f-banscri {
  margin: 15px auto 8px auto;
  font-size: 0.95rem;
}
.f-mainPage .g-banner .f-moneyMax {
  margin: 5px auto 0px auto;
  font-size: 2.4rem;
}
.f-mainPage .g-banner .f-returnCash {
  width: 120px;
  height: 35px;
  text-align: center;
  line-height: 35px;
  background-color: white;
  color: #169BD5;
  display: inline-block;
  border-radius: 5px;
  font-size: 1rem;
  margin-top: 35px;
  position: relative;
}
.f-mainPage .g-banner .f-returnCash .f-mmmbd {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: transparent;
  top: 0;
  left: 0;
}
.f-mainPage .g-cashInfor {
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: space-between;
}
.f-mainPage .g-cashInfor div {
  width: 50%;
  height: 60px;
  line-height: 60px;
  box-sizing: border-box;
}
.f-mainPage .g-cashInfor div:nth-child(1) {
  border-bottom: 1px solid #878787;
  border-right: 1px solid #878787;
}
.f-mainPage .g-cashInfor div:nth-child(2) {
  border-bottom: 1px solid #878787;
}
.f-mainPage .g-operate {
  width: 100%;
  height: auto;
  overflow: hidden;
}
.f-mainPage .g-operate ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 1.05rem;
}
.f-mainPage .g-operate ul li {
  height: 60px;
  line-height: 60px;
  padding-left: 25px;
  position: relative;
}
.f-mainPage .g-operate ul li span {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 20px;
  right: 20px;
  /* background-image: url(../../../static/go.png); */
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.f-mainPage .g-operate .f-goodNews {
  width: 340px;
  height: 144.5px;
  margin: 20px auto 30px auto;
  text-align: center;
  /* background-image: url(../../../static/banner.png); */
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
</style>
